<template>
    <div class="statistical-list">
        <el-form ref="selectForm" :model="selectForm">
            <el-form-item>
                <el-select
                    v-model="selectForm.shopid"
                    class="select-w"
                    v-if="activeName != 1"
                    @change="cheSelectFun(1)"
                >
                    <el-option
                        v-for="item in optionList.shop_ls"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="activeName != 6">
                <el-select
                    v-model="selectForm.uid_cp"
                    class="select-w"
                    @change="cheSelectFun(2)"
                >
                    <el-option
                        v-for="item in optionList.staff_ls"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select
                    v-model="selectForm.time"
                    class="select-w"
                    @change="cheSelectFun(3)"
                >
                    <el-option
                        v-for="item in optionList.mtime"
                        :label="item.title"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-select
                    v-model="selectForm.order"
                    class="select-w"
                    @change="cheSelectFun(4)"
                >
                    <el-option
                        v-for="item in activeName == 4
                            ? optionList.order_ls4
                            : optionList.order_ls"
                        :label="item.title"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="time-box" v-if="selectForm.stime">
            <el-tag
                closable
                color="#fff"
                @close="handleClose"
                @click="setTimeFun"
                >{{ `${selectForm.stime} 至 ${selectForm.dtime}` }}</el-tag
            >
        </div>

        <div
            class="list-box comm-list"
            :class="selectForm.stime ? 'list-box-h' : ''"
            v-infinite-scroll="loadFun"
            v-if="dataList && dataList.length > 0"
        >
            <div
                class="list-row"
                v-for="(item, index) in dataList"
                :key="index"
                :class="item.acitve ? 'acitve' : ''"
                @click="getDetailsInfo(item)"
            >
                <div
                    class="img-box"
                    :class="activeName == 2 || activeName == 3 ? 'img-w' : ''"
                >
                    <img
                        v-if="
                            activeName == 2 ||
                            activeName == 3 ||
                            activeName == 4 ||
                            item.rel_img
                        "
                        :src="item.img ? item.img : img_buf"
                        alt=""
                    />
                    <span v-else-if="item.title">{{ item.title[0] }}</span>
                </div>
                <div class="content-box">
                    <div class="title-box">
                        <span v-if="item.title">{{ item.title }}</span>
                        <span v-if="activeName == 4">{{ item.shop_name }}</span>
                        <span
                            v-if="activeName == 6 && item.position"
                            class="tag"
                            >{{ item.position }}</span
                        >
                    </div>
                    <div class="doc" v-if="activeName == 2 || activeName == 3">
                        <span>{{ item.gd_brand }}</span>
                    </div>
                    <div class="data-box">
                        <div class="felx">
                            <div class="data">
                                {{ activeName == 4 ? "消耗金额" : "销售额" }}
                                {{ item.amount }}
                            </div>
                            <div class="data">
                                {{ activeName == 4 ? "消耗次数" : "销量" }}
                                {{ item.number }}
                            </div>
                        </div>
                        <div class="felx">
                            <div class="data">
                                {{ activeName == 4 ? "成本金额" : "毛利" }}
                                {{ activeName == 4 ? item.cost : item.profit }}
                            </div>
                            <div class="data">
                                {{ activeName == 4 ? "预约单数" : "单数" }}
                                {{ item.num_od }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <empty v-else />
        <dateWin
            ref="dateWin"
            @selectDate="selectDate"
            @closeDate="closeDate"
        ></dateWin>
    </div>
</template>

<script>
import staticConst from "@/js/const/StaticConst.js";
import empty from "../../comm/empty.vue";
import dateWin from "@/components/comm/DateWin.vue";

export default {
    props: ["selectForm", "optionList", "activeName", "dataList"],
    components: { empty, dateWin },
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
        };
    },
    methods: {
        selectDate(st, et) {
            this.$emit("selectDate", st, et);
        },
        closeDate() {
            this.$emit("closeDate");
        },
        initData() {},
        loadFun() {
            this.$emit("loadFun");
        },
        getDetailsInfo(item) {
            this.$emit("getDetailsInfo", item);
        },
        handleClose() {
            this.$emit("resetDate");
            this.$emit("cheSelectFun");
        },
        // 打开时间选择器
        setTimeFun() {
            this.$refs.dateWin.show("show");
        },
        cheSelectFun(type) {
            if (this.selectForm.time == 5 && type == 3) {
                this.setTimeFun();
            } else if (
                (this.selectForm.time == "" || this.selectForm.time == 0) &&
                type == 3
            ) {
                this.$emit("resetDate");
                this.$emit("cheSelectFun");
            } else {
                this.$emit("cheSelectFun");
            }
            return;
        },
    },
};
</script>

<style lang="scss" scoped>
.statistical-list {
    height: 100vh;
    ::v-deep.el-form {
        display: flex;
        .select-w {
            width: 137px;
            margin-right: 10px;
        }
    }
    ::v-deep.time-box {
        margin-bottom: 20px;
        .el-tag {
            cursor: pointer;
        }
    }
    .list-box {
        height: calc(100% - 140px);
        overflow: auto;
        &.list-box-h {
            height: calc(100% - 200px);
        }
        .list-row {
            margin-bottom: 20px;
            display: flex;
            cursor: pointer;
            &:last-child {
                margin-bottom: 0;
            }
            &:hover {
                background: #fdf6f6;
                border-radius: 7px 0 0 7px;
            }

            .img-box {
                width: 80px;
                height: 80px;
                margin-right: 10px;
                border-radius: 5px;
                background: #ededed;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                &.img-w {
                    width: 100px;
                    height: 100px;
                }
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                span {
                    font-size: 18px;
                    font-weight: bold;
                    color: #000;
                }
            }
            .content-box {
                font-size: 14px;
                .title-box,
                .doc {
                    width: 400px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .title-box {
                    display: flex;
                    span {
                        margin-right: 5px;
                    }
                    .tag {
                        padding: 0 5px;
                        padding-bottom: 2px;
                        border-radius: 3px;
                        border: 1px solid #ff6600;
                        color: #ff6600;
                        font-size: 12px;
                        transform: scale(0.8);
                    }
                }
                .doc {
                    margin-top: 5px;
                    font-size: 12px;
                    color: #666;
                }
                .data-box {
                    margin-top: 7px;
                    font-size: 12px;
                    color: #666;
                    display: flex;
                    .felx {
                        width: 200px;
                    }
                }
            }
            &.acitve {
                background: #3989fc;
                border-radius: 7px 0 0 7px;
                pointer-events: none;
                color: #fff;
                .img-box {
                    border-radius: 5px 0 0 5px;
                }
                .data-box {
                    color: #fff;
                }
                .doc {
                    color: #fff;
                }
                .tag {
                    border: 1px solid #fff !important;
                    color: #fff !important;
                }
            }
        }
    }
    .the-sorting {
        margin-left: 20px;
        display: flex;
        align-items: center;
        height: 40px;
        .img-box {
            width: 20px;
            height: 20px;
            cursor: pointer;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}
</style>